﻿(function(window){
var 
	mooluRotate = function(){

		return new muRotate(Array.prototype
							.slice.apply(arguments));
	},

	muRotate = function(arryConfig){
			
		this._init(arryConfig);
			
	},
		
	aider = function(){
			
		var aidobj = {
			
			init : function(contextP){
				
				this.ref = contextP;
								
			},
			extend : function(destination, source, override){
				if(override === undefined)
					override = true;
				for(var property in source){
					if(override || !(property in destination)){
						destination[property] = source[property];
					}
				}
				return destination;
			},
			/**
				set some style
				to element
			*/
			setStyle : function(elems, style, value){
				
				if(!elems.length){
					elems = [elems];
				}
				
				if(typeof style == 'string'){
					var s = style;
					style = {};
					style[s] = value;
				}
				
				for(var i=0; i<elems.length; i++){
					var elem = elems[i];
				    for(var name in style){
						var value = style[name];
						if(name == 'opacity' && aider.browser.ie){
							elem.style.filter = 
								(elem.currentStyle.filter || '')
								.replace(/alpha\([^)]*\)/, '') +
								'alpha(opacity=' + value * 100 + ')';
						}else if(name == 'float'){
							elem.style[aider.browser.ie ? 
								'styleFloat' : 'cssFloat']
								= value;
						}else{
							elem.style[aider.legal(name)] = value;
						}
					}
				}
			},
			/**
				get current style
				object
			*/
			curStyle : document.defaultView ?
			function(elem){
				return document.defaultView
						.getComputedStyle(elem, null);	   
			} : 
			function(elem){
				return elem.currentStyle;
			},
			/**
				get current style 
				of element
			*/
			getStyle : document.defaultView ?
			function(elem, name){
				var 
					style = document.defaultView
								.getComputedStyle(elem, null);
				return name in style ?
					style[name] : style.getPropertyValue(name);
			} :
			function(elem, name){
				var 
					style = elem.style,
					curStyle = elem.currentStyle;
				
				if(name == 'opacity'){
					if(/alpha\(opacity=(.*)\)/i.test(curStyle.filter)){
						var 
							opacity = parseFloat(RegExp.$1);
							return opacity ? opacity / 100 : 0;
					}
					return 1;
				}else if(name == 'float'){
					name = 'styleFloat';
				}
				
				var 
					ret = curStyle[name] || curStyle[aider.legal(name)];
					if(!/^-?\d+(?:px)?$/i.test(ret) && /^\-?\d/.test(ret)){
						var 
							left = style.left,
							rsStyle = elem.runtimeStyle,
							rsLeft = rtStyle.left;
						
						rtStyle.left = curStyle.left;
						style.left = ret || 0;
						ret = style.pixelLeft + 'px';
						style.left = left;
						rtStyle.left = rsLeft;
					}
				
				return ret;
			},
			legal : function(s){
				return s.replace(/-([a-z])/ig, function(all, letter){
					return letter.toUpperCase();
				});
			},
			/**
				we can detect our
				own browser
			*/
			browser : function(ua){
				var 
					b = {
						msie : /msie/.test(ua) && !/opera/.test(ua),
						opera : /opera/.test(ua),
						safari : /webkit/.test(ua) && !/chrome/.test(ua),
						firefox : /firefox/.test(ua),
						chrome : /chrome/.test(ua)
					},
					vMark = '';
				
				for(var i in b){
					if(b[i]){
						vMark = 'safari' == i ? 'version' : i;
						break;
					}
				}
				
				b.version = 
					vMark && 
					RegExp('(?:' + vMark + ')[\\/: ]([\\d.]+)').test(ua) ?
					RegExp.$1 : '0';
				b.ie = b.msie;
				b.ie6 = b.msie && parseInt(b.version, 10) == 6;
				b.ie7 = b.msie && parseInt(b.version, 10) == 7;
				b.ie8 = b.msie && parseInt(b.version, 10) == 8;
				
				return b;
			}(window.navigator.userAgent.toLowerCase()),
			/**
				we can define our
				own events
			*/
			selfe : function(object, type, handler){
				var 
					guid = 1;
				
				return {
					addEvent : function(object, type, handler){
						if(!handler.$$$guid)
							handler.$$$guid = guid++;
						
						if(!object.cusevents)
							object.cusevents = {};
							
						if(!object.cusevents[type])
							object.cusevents[type] = {};
						
						object.cusevents[type][handler.$$$guid] = handler;
					},
					
					removeEvent : function(object, type, handler){
						if(object.cusevents && object.cusevents[type]){
							delete object.cusevents[type][handler.$$$guid];
						}
					},
					
					fireEvent : function(object, type){
						if(!object.cusevents)
							return;
						
						var args = Array.prototype.slice.call(arguments, 2),
							handlers = object.cusevents[type];
							
						for(var i in handlers){
							handlers[i].apply(object, args);
						}
					},
					
					clearEvent : function(object){
						if(!object.cusevents)
							return;
						
						for(var type in object.cusevents){
							var handlers = object.cusevents[type];
							for(var i in handlers){
								handlers[i] = null;
							}
							object.cusevents[type] = null;
						}
						
						object.cusevents = null;
					}
				}
			}(),
			/**
				change the context of
				the function
			*/
			bind : function(fn, context){
				var 
					slice = Array.prototype.slice,
					args = slice.call(arguments, 2);
				
				return function(){
					return fn.apply(context,
						args.concat(slice.call(arguments)));
				};
			},
			getScrollTop : function(node){
				var 
					doc = node ? node.ownerDocument : document;
				
				return doc.documentElement.scrollTop || doc.body.scrollTop;
			},
			getScrollLeft : function(node){
				var 
					doc = node ? node.ownerDocument : document;
					
				return doc.documentElement.scrollLeft || doc.body.scrollLeft;
			},
			rect : function(node){
				var 
					left = 0,
					top = 0,
					right = 0,
					bottom = 0;
				if(!node.getBoundingClientRect || this.browser.ie8){
					var n = node;
					while(n){
						left += n.offsetLeft,
						top += n.offsetTop;
						n = n.offsetParent;
					}
					right = left + node.offsetWidth;
					bottom = top + node.offsetHeight;
				}else{
					var rect = node.getBoundingClientRect();
					left = right = this.getScrollLeft(node);
					top = bottom = this.getScrollTop(node);
					left += rect.left;
					right += rect.right;
					top += rect.top;
					bottom += rect.bottom;
				}
				return {
					'left' : left,
					'top' : top,
					'right' : right,
					'bottom' : bottom
				}
			},
			clientRect : function(node){
				var 
					rect = this.rect(node),
					sLeft = this.getScrollLeft(node),
					sTop = this.getScrollTop(node);
				rect.left -= sLeft;
				rect.right -= sLeft;
				rect.top -= sTop;
				rect.bottom -= sTop;
				return rect;
			},
			/**
				you can bind multiple events
				on an element
			*/
			helpe : function(){
				var 
					removeEvent,
					addEvent, 
					guid = 1,
					storage = function(element, type, handler){
						
						if(!handler.$$guid)
							handler.$$guid = guid++;
							
						if(!element.events)
							element.events = {};
						
						var handlers = element.events[type];
						if(!handlers){
							handlers = element.events[type] = {};
							if(element['on' + type]){
								handlers[0] = element['on' + type];
							}
						}
					};
				
				if(window.addEventListener){
					var 
						fix = {
							'mouseenter' : 'mouseover',
							'mouseleave' : 'mouseout'
						};
					
					addEvent = function(element, type, handler){
						if(type in fix){
							
							storage(element, type, handler);
							var 
								fixhandler = 
								element.events[type][handler.$$guid] = 
								function(event){
									var 
										related = event.relatedTarget;
									if(!related || 
										(element != related &&
										(element.compareDocumentPosition(related) & 16))){
										    
										handler.call(this, event);
									}
								};
							
							element.addEventListener(fix[type], fixhandler, false);
						}else{
							
							element.addEventListener(type, handler, false);
						}
					};
					
					removeEvent = function(element, type, handler){
						if(type in fix){
							if(elements.events && 
								elements.events[type]){
								
								elements.removeEventListener(fix[type],
									element.events[type][handler.$$guid],
									false);
								delete element.events[type][handler.$$guid];
							}
						}else{
						
							element.removeEventListener(type, handler, false);
						}
					};
				}else{
					
					addEvent = function(element, type, handler){
						storage(element, type, handler);
						element.events[type][handler.$$guid] = handler;
						element['on' + type] = handleEvent;
					};
					
					removeEvent = function(element, type, handler){
						if(element.events && element.events[type]){
							delete element.events[type][handler.$$guid];
						}
					};
					
					function handleEvent(){
						var 
							returnValue = true,
							event = fixEvent(),
							handlers = this.events[event.type];
						
						for(var i in handlers){
							
							this.$$handleEvent = handlers[i];
							if(this.$$handleEvent(event) === false){
								
								returnValue = false;
							}
						}
						return returnValue;
					}
				}
				
				function fixEvent(event){
					if(event)
						return event;
					
					event = window.event;
					event.pageX = event.clientX + aider.getScrollLeft(event.srcElement);
					event.pageY = event.clientY + aider.getScrollTop(event.srcElment);
					event.target = event.srcElement;
					event.stopPropagation = stopPropagation;
					event.preventDefault = preventDefault;
					
					var relatedTarget = {
						'mouseout' : event.toElement,
						'mouseover' : event.fromElement
					}[event.type];
					
					if(relatedTarget){
						event.relatedTarget = relatedTarget;
					}
					
					return event;
				};
				
				function stopPropagation(){
					this.cancelBubble = true;
				};
				
				function preventDefault(){
					this.returnValue = false;
				};
				
				return {
					'addEvent' : addEvent,
					'removeEvent' : removeEvent,
					'fixEvent' : fixEvent
				}
			}(),
			
			isArray : function(obj){
				return Object.prototype
						.toString.call(obj) === '[object Array]';
			},
			
			indexOf : function(array, elt, from){
				if(array.indexOf){
					return isNaN(from) ? array.indexOf(elt) :
										array.indexOf(elt, from);
				}else{
					var len = array.length;
					from = isNaN(from) ? 0 :
							from < 0 ? Math.ceil(from) + len :
										Math.floor(from);
					
					for(; from<len; from++){
					    if(array[from] === elt) 
							return from;
					}
					return -1;
				}
			},
			
			lastIndexOf : function(array, elt, from){
				if(array.lastIndexOf){
					return isNaN(from) ? array.lastIndexOf(elt) :
										array.lastIndexOf(elt, from);
				}else{
					var len = array.length;
					from = isNaN(from) || from >= len - 1 ? len - 1 :
							from < 0 ? Math.ceil(from) + len :
										Math.floor(from);
					for(; from>-1; from--){
						if(array[from] === elt)
							return from
					}
					
					return -1;
				}
			},
			
			plugin : function(object, callback){
				if(undefined === object.length){
					for(var name in object){
						if(false === callback(object[name], name, object))
							break;
					}
				}else{
					for(var i=0, len=object.length; i<len; i++){
						if(i in object){
							if(false === callback(object[i], i, object))
								break;
						}
					}
				}
			}
		};
		
		var each = aidobj.plugin;
		/**
			filter  --  按指定函数过滤元素，汇集返回值为true元素组成新的数组
			forEach --	在每一个元素上执行函数，函数返回类型为空
			every   --  贪婪的试图匹配每一个元素，直到有一个返回false为止
			some    --  懒惰的企图找到一个元素合乎要求，只要有一个返回true停止
			map     --	使用同一函数处理每一个元素并返回，汇集返回结果组成新数组
		*/
		each({
			forEach : function(object, callback, thisp){
				each(object, function(){
					callback.apply(thisp, arguments)
				})
			},
			map : function(object, callback, thisp){
				var ret = [];
				each(object, function(){
					ret.push(callback.apply(thisp, arguments));
				});
				return ret;
			},
			filter : function(object, callback, thisp){
				var ret = [];
				each(object, function(item){
					callback.apply(thisp, arguments) && ret.push(item);
				});
				return ret;
			},
			every : function(object, callback, thisp){
				var ret = true;
				each(object, function(){
					if(!callback.apply(thisp, arguments)){
						ret = false;
						return false;
					}
				});
				return ret;
			},
			some : function(object, callback, thisp){
				var ret = false;
				each(object, function(){
					if(callback.apply(thisp, arguments)){
						ret = true;
						return false;
					}
				});
				return ret;
			}
		}, 
		function(method, name){
			aidobj[name] = function(object, callback, thisp){
				if(object[name]){
					return object[name](callback, thisp);
				}else{
					return method(object, callback, thisp);
				}
			}
		});
		
		return aidobj;
	}();

var $$OBEA = aider;	
		
muRotate.prototype = {
		
	_init : function(params){
		var 
			cfg = {},
			len = params.length,
			p, param;
		
		for(var i=1; i<len; i++){
		    
			param = params[i];
			switch(typeof param){
			    
				case 'number':
				
					break;
				case 'string':
				
					break;
				case 'function':
					
					break;
				case 'object':
					
					for(p in param){
					    
						cfg[p] = param[p];
					}
			}
		}
		
		var container = params[0];
		
		this._container = container;
		this._clientWidth = container.clientWidth;
		this._clientHeight = container.clientHeight;
		this._img = new Image();
		this._style = {};
		this._x = this._y = 1;
		this._radian = 0;
		this._support = false;
		
		this._init = this._load = 
		this._show = this._destroy = function(){};
		
		var opt = this._setOptions(cfg);
						
		this._zoom = opt.zoom;
		this.onPreLoad = opt.onPreLoad;
		this.onLoad = opt.onLoad;
		this.onError = opt.onError;
			
		this._LOAD = $$OBEA.bind(function(){
			this.onLoad();
			this._load();
			this.reset();
			this._img.style.visibility = 'visible';
		}, this);
			
		$$OBEA.selfe.fireEvent(this, 'init');	
		this._initMode();
		
		
		
		if(this._support){
			this._initContainer();
			this._init();
		}else{
			this.onError('not support');
		}
		
		$$OBEA.init(this);
		return this;
	},
			
	_setOptions : function(options){
		this.options = {
			mode : 'css3|filter|canvas',
			zoom : .1,
			onPreLoad : function(){},
			onLoad : function(){},
			onError : function(err){}
		};
		
		return $$OBEA.extend(this.options, options || {});
	},
		
	_initMode : function(){
		var modes = muRotate.modes;
		this._support = $$OBEA.some(
			this.options.mode.toLowerCase().split('|'), 
			function(mode){
				mode = modes[mode];
				if(mode && mode.support){
					mode.init && (this._init = mode.init);
					mode.load && (this._load = mode.load);
					mode.show && (this._show = mode.show);
					mode.destroy && (this._destroy = mode.destroy);
					
					$$OBEA.forEach(muRotate.transforms, function(transform, name){
						this[name] = function(){
							transform.apply(this, [].slice.call(arguments));
							this._show();
						}
					}, this);
					
					return true;
				}
			}, this);
	},
	
	_initContainer : function(){
		var 
			container = this._container,
			style = container.style,
			position = $$OBEA.getStyle(container, 'position');
		
		this._style = {'position' : style.position, 
					   'overflow' : style.overflow};
		
		if(position != 'relative' && position != 'absolute'){
			style.position = 'relative';
		}
		
		style.overflow = 'hidden';
		$$OBEA.selfe.fireEvent(this, 'initContainer');
	},
			
	load : function(src){
		if(this._support){
			var 
				img = this._img,
				oThis = this;
			
			
			img.onload || (img.onload = this._LOAD);
			img.onerror || (img.onerror = function(){oThis.onError('err image');});
			img.style.visibility = 'hidden';
			this.onPreLoad();
			img.src = src;
		}
	},
			
	reset : function(){
		if(this._support){
			this._x = this._y = 1;
			this._radian = 0;
			this._show();
		}
	},
			
	destroy : function(){
		if(this._support){
			this._destroy();
			$$OBEA.selfe.fireEvent(this, 'destroy');
			$$OBEA.setStyle(this._container, this._style);
			this._container = this._img = 
			this._img.onload = this._img.onerror = 
			this._LOAD = null;
		}
	}
};

muRotate.modes = function(){
	var css3Transform;
	
	function initImg(img, container){
		$$OBEA.setStyle(img, {
			position : 'absolute',
			border : 0,
			padding : 0,
			margin : 0,
			width : 'auto',
			height : 'auto',
			visibility : 'hidden'
		});
		container.appendChild(img);
	}
	
	function getMatrix(radian, x, y){
		var Cos = Math.cos(radian),
			Sin = Math.sin(radian);
		
		return {
			M11 : Cos * x,
			M12 : -Sin * y,
			M21 : Sin * x,
			M22 : Cos * y
		};
	}
	
	return {
		css3 : {
			support : function(){
				var style = document.createElement('div').style;
				return $$OBEA.some(
					['transform', 'MozTransform', 'webkitTransform', 'OTransform'],
					function(css){
						if(css in style){
							css3Transform = css;
							return true;
						}
					}
				);
			}(),
			
			init : function(){
				initImg(this._img, this._container);
			},
			
			load : function(){
				var img = this._img;
				$$OBEA.setStyle(img, {
					top : (this._clientHeight - img.height) / 2 + 'px',
					left : (this._clientWidth - img.width) / 2 + 'px',
					visibility : 'visible'
				});
			},
			
			show : function(){
				var matrix = getMatrix(this._radian, this._y, this._x);
				
				this._img.style[css3Transform] = 'matrix('
					+ matrix.M11.toFixed(16) + ',' + matrix.M21.toFixed(16) + ','
					+ matrix.M12.toFixed(16) + ',' + matrix.M22.toFixed(16) + ', 0, 0)';
			},
			
			destroy : function(){
				this._container.removeChild(this._img);
			}
		},
		
		filter : {
			support : function(){
				return 'filters' in document.createElement('div');
			}(),
			
			init : function(){
				initImg(this._img, this._container);
				this._img.style.filter = 
					"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand')";
			},
			
			load : function(){
				this._img.onload = null;
				this._img.style.visibility = 'visible';
			},
			
			show : function(){
				var img = this._img;
				$$OBEA.extend(
					img.filters.item('DXImageTransform.Microsoft.Matrix'),
					getMatrix(this._radian, this._y, this._x)
				);
				img.style.top = (this._clientHeight - img.offsetHeight) / 2 + 'px';
				img.style.left = (this._clientWidth - img.offsetWidth) / 2 + 'px';
			},
			
			destroy : function(){
				this._container.removeChild(this._img);
			}
		},
		
		canvas : {
			support : function(){
				return 'getContext' in document.createElement('canvas');
			}(),
			
			init : function(){
				var 
					canvas = this._canvas = document.createElement('canvas'),
					context = this._context = canvas.getContext('2d');
				
				$$OBEA.setStyle(canvas, {
					position : 'absolute',
					left : 0,
					top : 0
				});
				
				canvas.width = this._clientWidth;
				canvas.height = this._clientHeight;
				this._container.appendChild(canvas);
			},
			
			show : function(){
				var img = this._img,
					context = this._context,
					clientWidth = this._clientWidth,
					clientHeight = this._clientHeight;
					
				context.save();
				context.clearRect(0, 0, clientWidth, clientHeight);
				context.translate(clientWidth/2, clientHeight/2);
				context.rotate(this._radian);
				context.scale(this._y, this._x);
				context.drawImage(img, -img.width/2, -img.height/2);
				context.restore();
			},
			
			destroy : function(){
				this._container.removeChild(this._canvas);
				this._canvas = this._context = null;
			}
		}
	};
}();

muRotate.transforms = {
	vertical : function(){
		this._radian = Math.PI - this._radian;
		this._y *= -1;
	},
	horizontal : function(){
		this._radian = Math.PI - this._radian;
		this._x *= -1;
	},
	rotate : function(radian){
		this._radian = radian;
	},
	left : function(){
		this._radian -= Math.PI/2;
	},
	right : function(){
		this._radian += Math.PI/2;
	},
	rotatebydegress : function(degress){
		this._radian = degress * Math.PI/180;
	},
	scale : function(){
		function getZoom(scale, zoom){
			return scale > 0 && scale > -zoom ? zoom :
				   scale < 0 && scale < zoom ? -zoom : 0;
		}
		return function(zoom){
			if(zoom){
				var 
					hZoom = getZoom(this._y, zoom),
					vZoom = getZoom(this._x, zoom);
				if(hZoom && vZoom){
					this._y += hZoom;
					this._x += vZoom;
				}
			}
		}
	}(),
	zoomin : function(){
		this.scale(Math.abs(this._zoom));
	},
	zoomout : function(){
		this.scale(-Math.abs(this._zoom));
	}
};

muRotate.prototype._init = function(){
	var 
		init = muRotate.prototype._init,
		methods = {
			'init' : function(){
				this._mrX = this.mrY = this._mrRadian = 0;
				this._mrSTART = $$OBEA.bind(start, this);
				this._mrMOVE = $$OBEA.bind(move, this);
				this._mrSTOP = $$OBEA.bind(stop, this);
			},
			'initContainer' : function(){
				$$OBEA.helpe.addEvent(this._container, 
										'mousedown', this._mrSTART);
			},
			'destroy' : function(){
				$$OBEA.helpe.removeEvent(this._container, 
										'mousedown', this._mrSTART);
				this._mrSTOP();
				this.mrSTART = this._mrMOVE = this._mrSTOP = null;
			}
		};
	
	function start(e){
		var rect = $$OBEA.clientRect(this._container);
		this._mrX = rect.left + this._clientWidth / 2;
		this._mrY = rect.top + this._clientHeight / 2;
		this._mrRadian = Math.atan2( e.clientY - this._mrY, 
							e.clientX - this._mrX) - this._radian;
		$$OBEA.helpe.addEvent(document, 'mousemove', this._mrMOVE);
		$$OBEA.helpe.addEvent(document, 'mouseup', this._mrSTOP);
		if($$OBEA.browser.ie){
			var container = this._container;
			$$OBEA.helpe.addEvent(container, 'losecapture', this._mrSTOP);
			container.setCapture();
		}else{
			$$OBEA.helpe.addEvent(window, 'blur', this._mrSTOP);
			e.preventDefault();
		}
	}
	
	function move(e){
		this.rotate(Math.atan2(e.clientY - this._mrY, 
							e.clientX - this._mrX) - this._mrRadian);
		window.getSelection ? window.getSelection().removeAllRanges() :
									document.selection.empty();
	}
	
	function stop(){
		$$OBEA.helpe.removeEvent(document, 'mousemove', this._mrMOVE);
		$$OBEA.helpe.removeEvent(document, 'mouseup', this._mrSTOP);
		if($$OBEA.browser.ie){
			var container = this._container;
			$$OBEA.helpe.removeEvent(container, 'losecapture', this._mrSTOP);
			container.releaseCapture();
		}else{
			$$OBEA.helpe.removeEvent(window, 'blur', this._mrSTOP);
		}
	}
	return function(){
		if(options.mouseRotate !== false){
			$$OBEA.forEach(methods, function(method, name){
				$$OBEA.selfe.addEvent(this, name, method);
			}, this);
		}
		init.apply(this, Array.prototype.slice.apply(arguments));
	}
}();


muRotate.prototype._init = function(){
	var 
		init = muRotate.prototype._init,
		mousewheel = $$OBEA.browser.firefox ? 'DOMMouseScroll' : 'mousewheel',
		methods = {
			'init' : function(){
				this._mzZoom = $$OBEA.bind(zoom, this);
			},
			'initContainer' : function(){
				$$OBEA.helpe.addEvent(this._container, 
										mousewheel, this._mzZoom);
			},
			'dispose' : function(){
				$$OBEA.helpe.removeEvent(this.container,
										mousewheel, this._mzZoom);
				this._mzZoom = null;
			}
		};
	
	function zoom(e){
		this.scale((
			e.wheelDelta ? e.wheelDelta / (-120) : (e.detail || 0) / 3
		) * Math.abs(this._zoom));
		e.preventDefault();
	}
	
	return function(){
		if(options.mouseZoom !== false){
			$$OBEA.forEach(methods, function(method, name){
				$$OBEA.selfe.addEvent(this, name, method);
			}, this);
		}
		init.apply(this, Array.prototype.slice.apply(arguments));
	}
}();

function $$(id){
	return document.getElementById(id);
}

var 
	container = $$('idContainer'),
	src = 'http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mm14.jpg',
	gif = 'http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif',
	options = {
		onPreLoad : function(){
			container.style.backgroundImage = "url('" + gif +"')";
			
		},
		onLoad : function(){
			container.style.backgroundImage = "";
		},
		onError : function(err){
			container.style.backgroundImage = "";
			alert(err);
		}
	},
	it = mooluRotate(container, options);
	

it.load(src);		

$$("idVertical").onclick = function(){
	it.vertical();
};

$$("idHorizontal").onclick = function(){
	it.horizontal();
};

$$("idLeft").onclick = function(){
	it.left();
};

$$("idRight").onclick = function(){
	it.right();
};

$$("idReset").onclick = function(){
	it.reset();
};

$$("idCanvas").onclick = function(){
	if(this.value == "默认模式"){
		this.value = "使用Canvas";
		delete options.mode;
	}else{
		this.value = "默认模式";
		options.mode = "canvas";
	}
	
	it.destroy();
	it = mooluRotate(container, options);
	it.load(src);
}
})(window)